<!--
 * @Author: chengjiang
 * @Date: 2024-10-31 10:24:25
 * @Description: 
-->
<template>
    <a-layout>
      <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
        <!-- <a-row>
            <a-col :span="18" :push="6">col-18 col-push-6</a-col>
            <a-col :span="6" :pull="18">col-6 col-pull-18</a-col>
        </a-row> -->
        <a-flex gap="middle" justify="space-between" horizontal>
            <a-menu
          v-model:selectedKeys="selectedKeys"
          theme="dark"
          mode="horizontal"
          :style="{ lineHeight: '64px' }"
        >
          <a-menu-item key="0"><div class="logo"><img src="/logo.png" alt="" width="150"/></div></a-menu-item>
          <a-menu-item key="1" @click="changeMenu('/gold/1')">零售盘</a-menu-item>
          <a-menu-item key="2" @click="changeMenu('/gold/0')">看价盘</a-menu-item>
          <a-menu-item key="3" @click="changeMenu('/account')">账户</a-menu-item>
          <a-menu-item key="4" @click="changeMenu('/preview')">其他</a-menu-item>
        </a-menu>
        <a-flex gap="large" justify="space-around" align="center" class="text-light-50">
            <SearchOutlined />
            <BellOutlined />
            
        <a-dropdown placement="bottomRight">
            <a-avatar size="large">
                <template #icon><UserOutlined /></template>
            </a-avatar>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <a target="_blank" @click="out">
                <LogoutOutlined /> | 退出登录
              </a>
            </a-menu-item>
            <a-menu-item>
              <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
                2nd menu item
              </a>
            </a-menu-item>
            <a-menu-item>
              <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
                3rd menu item
              </a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
        </a-flex>
        </a-flex>
      </a-layout-header>
      <a-layout-content :style="{ padding: '0 50px', marginTop: '64px' }">
        <div class="mt-10"></div>
        <div :style="{ background: '#fff', padding: '24px', minHeight: '79vh' }">
            <!--  解决切换路由的刷新 :key="$route.fullPath" -->
            <router-view :key="$route.fullPath"/> 
        </div>
      </a-layout-content>
      <a-layout-footer :style="{ textAlign: 'center' }">
        <p class="mt-5 text-[#858688]">copyright &copy; 2024盘庚金技术小组 | <a href="https://beian.miit.gov.cn">备案：粤ICP备2023131510号-1</a></p>
        
      </a-layout-footer>
      <a-back-top />
    </a-layout>
  </template>
  <script lang="ts" setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { setToken } from '../utils/token';
  import { logout } from '../api/home';
  import { message } from 'ant-design-vue';
  import { UserOutlined, BellOutlined, SearchOutlined,LogoutOutlined } from '@ant-design/icons-vue';
  const router = useRouter();
  const selectedKeys = ref<string[]>(['1']);
    const changeMenu = (route:string) => {
                console.log(route)
                //获取路由对象并切换
                router.push(route)
    }
    // 退出功能。
    const out = async () => {
      try {
        const response = await logout()
        if (response) {
          setToken()
          message.success('登出成功!')
          router.push({name: 'Login'})
        } else {
          message.error('登出失败!')
        }
      } catch (errorInfo) {
        message.error('登出失败!')
        // setToken('ret.token');
        console.log('errorInfo', errorInfo)
      }
    }
  </script>
  <style scoped>
  #components-layout-demo-fixed .logo {
    width: 120px;
    height: 31px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px 24px 16px 0;
    float: left;
  }
  .site-layout .site-layout-background {
    background: #fff;
  }
  
  [data-theme='dark'] .site-layout .site-layout-background {
    background: #303030;
  }
  .ant-layout-header {
    background: #303030; 
  }
  .ant-menu-dark {
    background: #303030;
  }
</style>
  